<template>
	<view class="task_detail">
		<!-- 任务详情组件 -->
		<task-detail-conent :taskDetailList="taskDetailList" v-if="taskDetailList"></task-detail-conent>
		<vote v-if="taskTypeSign == 'VoteElection'" :voteList="voteList" :animationData="animationData" v-on:pSelectVote="selectVote"></vote>
		<!-- 操作按钮 -->
		<view class="task_bar" :class="{ noPaddingStyle: isActive }">
			<!-- 领取任务 -->
			<view class="btn" v-if="taskTypeSign == 'task'">
				<u-button type="primary" :text="buttonText" class="receive_btn" color="var(--echo-main-color)"
					@tap="toReceiveTask" :disabled="isdisabled" shape="circle">
				</u-button>
			</view>
			<!-- 提案 -->
			<view class="proposal_btn" v-else-if="taskTypeSign == 'proposal'">
				<u-button text="反对" type="error" @click="toSupport"></u-button>
				<u-button text="支持" color="var(--echo-main-color)" @click="toAgainst"></u-button>
			</view>
			<!-- 选举 -->
			<view v-else>
			<view class="elect_btn">
				<view class="" style="padding: 20rpx;">
					<u-button type="primary" text="确认" color="var(--echo-main-color)" shape="circle"
						@click="confirmChoice">
					</u-button>
				</view>
			</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		getTaskDetails,
		claimTask,
		getVoteProposalDetails,
		voteApi,
		votesApi,
		getVoteElectionOption
	} from '@/config/taskApi.js';
	export default {
		data() {
			return {
				// 任务详情数据
				taskDetailList: null,
				// 任务编号
				serialNo: '',
				// 客户编号
				customerNo: '',
				// 类型标识表明当前是什么类型的
				taskTypeSign: '',
				// 按钮是否禁用
				isdisabled: false,
				// token
				token: '',
				buttonText: '领取任务',
				// 判断是什么详情
				whatDetails: null,
				// 选举详情没有noPaddingStyle
				isActive: false,
				animationData: [],
				// 选举人列表
				voteList: [],
				// 已被选中
				voteSelectList: [],
				// 已被选中,最终结果
				selectList: []
			};
		},
		created() {
			// 客户编号
			this.customerNo = uni.getStorageSync('customerNo')
			// token
			this.token = uni.getStorageSync('token')
		},
		onLoad(option) {
			let {
				taskTypeSign,
				serialNo
			} = option
			console.log('taskTypeSign', taskTypeSign, serialNo);
			this.taskTypeSign = taskTypeSign
			this.serialNo = serialNo
			if (taskTypeSign == 'task') {
				// 任务详情
				getTaskDetails({
					serialNo
				}).then(res => {
					if (res) {
						this.taskDetailList = res.data
					}
				})
			} else if (taskTypeSign == 'proposal') {
				// 提案详情
				getVoteProposalDetails({
					serialNo
				}).then(res => {
					console.log(res);
					if (res) {
						this.taskDetailList = res.data
					}
				})
			} else {
				getVoteElectionOption({
					electionNo: this.serialNo
				}).then(res => {
					if (res) {
						// 选举列表 循环一个属性去支持组件的选择
						var voteArray = res.data.voteElectionOption.map((item, index, arry) => {
							item.selected = false
							return item
						})
						console.log('voteArray', voteArray);
						this.voteList = voteArray
						// 详情
						this.taskDetailList = res.data
					}
				})
			}
		},
		methods: {
			// 领取任务
			toReceiveTask() {
				// if (this.token) {
					claimTask({
						serialNo: this.serialNo,
						customerNo: this.customerNo
					}).then(res => {
						if (res) {
							console.log(res)
							uni.showToast({
								icon: 'success',
								position: 'bottom',
								title: '任务领取成功'
							});
							// 领取之后变为不可点击
							this.isdisabled = true
							this.buttonText = '已领取'
						}
					})
				/* } else {
					uni.$u.toast('请先登陆')
				} */
			},
			// 提案反对
			toSupport() {
				voteApi({
					// 类型 提案
					type: 2,
					typeNo: this.serialNo,
					// 类型 2同意
					status: 2,
					customerNo: this.customerNo
				}).then(res => {
					console.log('res', res);
					if (res) {
						uni.showToast({
							icon: 'success',
							position: 'bottom',
							title: '选择成功'
						});
					}
				})
			},
			// 提案同意
			toAgainst() {
				voteApi({
					// 类型 提案
					type: 2,
					typeNo: this.serialNo,
					// 类型 3 反对
					status: 3,
					customerNo: this.customerNo
				}).then(res => {
					if (res)
						uni.showToast({
							icon: 'success',
							position: 'bottom',
							title: '选择成功'
						});
				})
			},
			// 开始加载动画效果
			loadData() {
				var animation = uni.createAnimation({
					duration: 1000
				});
				this.animation = animation;
				let vtList = this.voteList;
				for (let i = 0; i < vtList.length; i++) {
					animation.width(vtList[i].percent).step();
					this.animationData[i] = animation.export();
				}
			},
			// 评选选举选择
			selectVote(item, index) {
				// 没有点击就可以点击
				// 这是拿到的点击的最终数据
				if (this.voteList[index].selected == false) {
					this.voteList[index].selected = true;
					this.voteSelectList.push(item)
				}
				// 点击了再点击可以取消
				// 改变以后的数据
				else {
					this.voteList[index].selected = false;
					var cancelSelectIndex = this.voteSelectList.indexOf(item)
					this.voteSelectList.splice(cancelSelectIndex, 1)
				}
				// 最终数据
				let SelectList = this.voteSelectList.map(item => {
					return item.serialNo
				})
				this.selectList = SelectList
				console.log('this.selectList', this.selectList);
			},
			// 确认选择
			confirmChoice() {
				votesApi({
					// 类型 选举评选
					type: 1,
					electionNo:this.serialNo,
					serialNoList: this.selectList,
					// 类型 2同意
					status: 1,
					customerNo: this.customerNo
				}).then(res => {
					console.log('res', res);
					if (res)
						uni.showToast({
							icon: 'success',
							position: 'bottom',
							title: '投票成功'
						});
				})
			}
		}
	}
</script>

<style lang="scss">
	.task_detail {

		.detail {

			// 创造者&时间
			&_creator-time {
				display: flex;
				justify-content: space-between;
				font-size: $echo-font-size-conent;
				color: #777;
				padding: 20rpx 0;
			}
		}

		.task_bar {
			position: fixed;
			left: 0;
			bottom: 0;
			width: 100%;
			box-sizing: border-box;
			padding: 20rpx;

			.proposal_btn {
				display: flex;
				justify-content: space-between;

				.u-button {
					width: 40%;
				}
			}
		}

		.noPaddingStyle {
			padding: 0;
		}
	}
</style>
